@extends('layouts.back_stage')
@section('content')
  <style>
   #app{padding:20px}
 .table_margin{padding:30px;background:#fff;text-align:center;margin-top:10px}
 .but{margin-right:10px;overflow: hidden;}
 .touching{margin-left:20px;float:right}
  </style>
  <div class="container">
  <div style="padding:20px 20px 5px 0;overflow:hidden;"><h3 style="float:left;">仓库管理</h3></div>
      <div class="row app" id="app" v-cloak>
      <div class="but">
          <el-button type="primary" class="touching"  @click='addManage' size="small">新增</el-button>
       </div>
            <div class="table_margin">
            <template>
            <el-table
            :data="tableData"
            border
            :resizable='false'
            size="small"
            style="width: 100%">
            <el-table-column
            type="index"
            :resizable='false'
                label="序号"
                :resizable='false'
                size="small"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="type"
                :resizable='false'
                :resizable='false'
                label="仓库类型"
                align="center"
               >
            </el-table-column>
            <el-table-column
                fixed="right"
                :resizable='false'
                align="center"
                :resizable='false'
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button type="text" @click="updata(scope)" size="small">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>
        </template>
            <el-dialog
                title="仓库类型"
                :resizable='false'
                :visible.sync="dialogVisible"
                width="25%"
                :before-close="handleClose">
                <el-input v-model="input" size="small" clearable></el-input>

                <span slot="footer" class="dialog-footer">
                    <el-button  type="primary" @click="dialogVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="submit" size="small">确 定</el-button>
                </span>
                </el-dialog>

                <el-dialog
                title="仓库类型"
                :resizable='false'
                :visible.sync="diaVisible"
                width="25%"
                :before-close="handleClose">
                <el-input v-model="input_add" size="small" clearable></el-input>

                <span slot="footer" class="dialog-footer">
                    <el-button  type="primary" @click="diaVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="present"  size="small">确 定</el-button>
                </span>
                </el-dialog>
            </div>
      </div>
  </div> 
 
  <script>
      const App=new Vue({
        el: '#app',
        data() {
          return {
            tableData: [],
            dialogVisible:false,
            diaVisible:false,
            input:'',
            input_add:'',
            id:''

          }
        },
        methods: {
            //
            handleClose(done) {
               this.dialogVisible=false
               this.diaVisible=false
             },
            //修改
            updata(scope){
                // console.log(scope.row)
                 this.dialogVisible=true
                 this.input=scope.row.type
                 this.id=scope.row.id
            },
            //修改提交
            submit(){
                let that=this
                var opt=[]
                    $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:'post',
                    url:`/distribute/warehouse/update/${that.id}`,
                    dataType:'json',
                    data:{
                         name:this.input
                    },
                }).then(function(res){
                     if(res.result.success==true){
                       //  console.log(res)
                            that.dialogVisible=false
                            that.refurbish()
                            that.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                     }else{
                        that.$notify({
                            title: '警告',
                            message: res.result.errorMsg,
                            type: 'warning'
                        });
                     }
                    
                })
            },
            present(){
                let  that=this
                 $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:'post',
                    url:`/distribute/warehouse/store`,
                    dataType:'json',
                    data:{
                         name:this.input_add
                    },
                }).then(function(res){
                  //  console.log(res)
                    that.diaVisible=false
                    that.refurbish()
                    that.$message({
                        message: '新增成功',
                        type: 'success'
                        });
                })
            },
             //新增
             addManage(){
                this.diaVisible=true
               
               
             },
            //tab
            refurbish(){
                let that=this
                var opt=[]
                $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/distribute/warehouse/index',
                  dataType:'json',
              }).then(function(res){
                // console.log(res)
                 for(var e in res.content){
                     opt.push({
                         'type':res.content[e].type,
                         'id':res.content[e].id
                     })
                 }
                that.tableData=opt
               
              })
            }
           
          },
     mounted() {
        this.refurbish();
          },
      })
  </script>
@endsection